<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>监听时间优化</title>
</head>
<body onresize="throttle(doResize);">
	<div id="console" style="height: 200px;overflow-y: auto;border: 1px solid #ff0000"></div>
	调整页面大小以显示结果
	<script type="text/javascript">
		var time = 0;
		function doResize() {
			document.getElementById('console').innerHTML += ('总共执行了'+ (++time) + '次<br/>');
		}

		//节流函数
		function throttle(method, context) {
			clearTimeout(method.tId); //清除执行函数的定时器，第一次进入为空
			//设置一个100ms后在指定上下文中执行传入的method方法的定时器。
			method.tId = setTimeout(function () {
				method.call(context);
			}, 100);
		}

		//让div的高度永远等于它的宽度
		// function doResize() {
		// 	var div = document.getElementById('console');
		// 	div.style.height = div.offsetWidth + 'px';
		// }
	</script>
</body>
</html>